<template>
  <div>
    <div class="container">
      <a-space direction="vertical" style="width: 100%">
        <a-card>
          <div class="top-layout">
            <a-avatar
              :size="40"
              style="margin-right: 10px"
              :src="shopInfo.coverPic"
            ></a-avatar>
            <div>
              <div class="name-layout">
                <text>{{ shopInfo.name }}</text>
                <a-tag color="#108ee9">{{
                  shopInfo.isAuth == 0 ? "未实名" : "已实名"
                }}</a-tag>
              </div>
              <a-typography-text type="secondary"
                >注册时间：{{ shopInfo.createdTime }}</a-typography-text
              >
            </div>
          </div>
          <a-divider />

          <div class="layout-flexSpace">
            <div>
              <a-statistic title="账户总额" :value="accountData.amount" />

              <a-statistic
                title=""
                :value="accountData.unrecordedAmount"
                style="font-size: 13px"
              >
                <template #prefix>
                  <span>未入账金额：</span>
                </template>
              </a-statistic>
            </div>
            <a-button type="primary" @click="withdrawalChange">提现</a-button>
          </div>
        </a-card>

        <a-card title="营业数据">
          <div v-if="accountData" class="account">
            <div>
              <h4>总营业额</h4>
              <h3>{{ accountData.totalTurnover }}</h3>
            </div>
            <div>
              <h4>平均月营业额</h4>
              <h3>{{ accountData.averageMonthlyTurnover }}</h3>
            </div>
            <div>
              <h4>平均日营业额</h4>
              <h3>{{ accountData.averagedailyTurnover }}</h3>
            </div>
            <div>
              <h4>已售商品</h4>
              <h3>{{ accountData.shopend }}</h3>
            </div>
            <div>
              <h4>在售商品</h4>
              <h3>{{ accountData.shopping }}</h3>
            </div>
          </div>
          <a-typography-title :level="5">近12月营业走势</a-typography-title>
          <echartsBar ref="echarts" height="height:400px"></echartsBar>
        </a-card>

        <a-card>
          <div class="layout-flexSpace">
            <a-typography-title :level="5">账户提现记录</a-typography-title>
            <a-space wrap>
              <a-form :model="formState">
                <a-row>
                  <a-col :span="20">
                    <a-form-item label="提现时间">
                      <a-range-picker
                        v-model:value="dataTime"
                        @change="handleChooseDate"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
              <a-button type="primary" @click="handleExport">导出</a-button>
            </a-space>
          </div>
          <a-table
            :dataSource="dataSource"
            :columns="columns"
            :pagination="pagination"
            @change="handleChangeTable"
          ></a-table>
          <a-statistic title="总提现金额" :value="accountData.totalAmount" />
        </a-card>
      </a-space>
    </div>
    <!-- 提现弹窗 -->
    <withdrawal ref="withdrawalRef"></withdrawal>
    <!-- 绑定账户弹窗 -->
    <bindAccount ref="bindAccountRef"></bindAccount>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import echartsBar from "../../components/echartsBar.vue";
import withdrawal from "./salesModule/withdrawal.vue";
import bindAccount from "./salesModule/bindAccount.vue";
import { getShopInfo } from "@/api/index";
import { exporeFile } from "@/utils/exporeFile";
import {
  queryUserAccountData,
  queryWithdrawLog,
  countOrderData,
  exportWithdrawLog
} from "@/api/income";

const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "50", "100"],
  showTotal: () => `共 ${total} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  startTime: undefined,
  endTime: undefined,
});
const dataSource = ref([]);

const columns = ref([
  {
    title: "提现时间",
    dataIndex: "createdTime",
    key: "createdTime",
    align: "left",
  },
  {
    title: "提现金额",
    dataIndex: "amount",
    key: "amount",
    align: "center",
  },
  {
    title: "账户余额",
    dataIndex: "residualAmount",
    key: "residualAmount",
    align: "center",
  },
  {
    title: "提现方式",
    dataIndex: "type",
    key: "type",
    align: "center",
  },
  {
    title: "提现账户",
    dataIndex: "withdrawalAccount",
    key: "withdrawalAccount",
    align: "center",
  },
  {
    title: "提现状态",
    dataIndex: "state",
    key: "state",
    align: "center",
  },
]);
const shopInfo = ref({});
const getShopInfoFn = async () => {
  const result = await getShopInfo();
  if (result.code == 200) {
    shopInfo.value = result.data;
  }
};
const accountData = ref({});
const queryUserAccountDataList = async () => {
  const result = await queryUserAccountData();
  if (result.code == 200) {
    accountData.value = result.data;
  }
};
const queryWithdrawLogList = async () => {
  const result = await queryWithdrawLog(formState.value);
  if (result.code == 200) {
    dataSource.value = result.data.list;
    pagination.value.total = result.data.total;
  }
};
const echarts = ref(null);
const countOrderDataFn = async () => {
  const result = await countOrderData(formState.value);
  if (result.code == 200) {
    echarts.value.initEcharts(result.data);
  }
};
const dataTime = ref(null);
function handleChooseDate(date, dateInfo) {
  dataTime.value = date;
  formState.value.startTime = dateInfo[0];
  formState.value.endTime = dateInfo[1];
  countOrderDataFn()
}

//绑定账户
const bindAccountRef = ref(null);

// 提现弹窗
const withdrawalRef = ref(null);
const withdrawalChange = () => {
  // bindAccountRef.value.modalOpen = true
  withdrawalRef.value.open();
};
function init() {
  getShopInfoFn();
  queryWithdrawLogList();
  queryUserAccountDataList();
  countOrderDataFn();
}
const handleExport = async () => {
  const data = await exportWithdrawLog(formState.value);
  exporeFile("提现列表.xls", data);
}
// 分页
const handleChangeTable = (pagina) => {
  console.log('pagina',pagina);
  pagination.value = {...pagination.value,...pagina};
  formState.value.page = pagina.current;
  formState.value.pageSize = pagina.pageSize;
  queryWithdrawLogList();
}
onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
.top-layout {
  display: flex;
  align-items: center;
  .name-layout {
    display: flex;
    align-items: center;
    text {
      margin-right: 12px;
      color: #2b3453;
      font-size: 15px;
      font-weight: 600;
    }
  }
}
.account {
  background: #f3f5f7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding: 24px 0;
  div {
    border-left: 1px solid #b8bcc5;
    flex: 1;
    text-align: center;
    h3 {
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262e47;
    }
    h4 {
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #262e47;
      line-height: 14px;
    }
  }
  div:first-child {
    border-left: 0;
  }
}
.chart {
  height: 400px;
}
</style>
